<template>
    <view class="zz-uni-live-col_202009071500">
        <view 
            class="uni-live-col"
            :class="outClass"
            @click="openLiveRoom">
            <!--  -->
            <view class="info-wrap zz-flex zz-jc-sb zz-ai-c">
                <!--  -->
                <view class="zz-flex zz-ff-cw info">
                    <view class="info-item fs32 lh44 color333 clamp">{{itemInfo.name}}</view>
                    <view class="info-item zz-flex zz-ai-c">
                        <text 
                            :style="themeStyles.textMainColor"
                            class="fs36 template__icon template__icon-live2"></text>
                        <view 
                            :style="themeStyles.textMainColor"
                            class="fs24 lh34">{{itemInfo.startTime}}{{itemInfo.status==102?'开播':''}}</view>
                    </view>
                </view>
                <!-- 按钮 -->
                <button 
                    :style="itemInfo.status==101?themeStyles.backgroundMainColor:''"
                    class="btn"
                    :class="[
                        {'btn-wait':itemInfo.status==102},
                        {'btn-over':itemInfo.status==103}
                    ]">{{itemInfo.statusValue}}</button>
            </view>
            <!-- 图片 -->
            <view class="live-image-wrap">
                <image
					class="live-image"
					:src="itemInfo.coverImg"
					:lazy-load="true"
					mode="aspectFill"
				></image>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    props:{
        // 跳转到直播间要携带的页面路径  0: 首页  1：直播列表页
        pathResource:{
            type:String,
            default:"0"
        },
        itemInfo:{
            type:Object,
            default(){
                return {};
            }
        },
        outClass:{
            type:String,
            default:""
        }
    },
    data(){
        return {
            // 要跳转的直播间
            //
            statusInfo:{
                "101":{
                    status:101,
                    statusValue:"正在直播"
                },
                "102":{
                    status:102,
                    statusValue:"未开播"
                },
                "103":{
                    status:102,
                    statusValue:"已结束"
                }
            }
        };
    },
    methods:{
        // 进入正在直播的直播间
        openLiveRoom(){
            const itemInfo = this.itemInfo;
            try {
                if(itemInfo.status===101){
                    console.log("--直播相关信息---itemInfo---",itemInfo);
                    let roomId = itemInfo.roomId // 填写具体的房间号
                    console.log("--房间id---roomId---",roomId);
                    // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
                    let customParams = encodeURIComponent(JSON.stringify({ path:`${this.getPath(this.pathResource)}`, pid: 1 })) 
                    console.log("--跳转要携带的参数---customParams----",customParams);
                    wx.navigateTo({
                        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
                    });
                }else{
                    this.$api.showToast(this.statusInfo[`${itemInfo.status}`].statusValue)
                }
            } catch (error) {
                console.log("---跳转到直播间出错_live_error---",error);
            }
            
        },
        getPath(pathResource){
            let path;
            switch(pathResource){
                case "1":
                    path =  `pages/tabbar/index`;
                    break;
                default:
                    path =  `pages/common/pages/live/live`;
                    break;
            }
            return path;
        }
    }
}
</script>
<style lang="scss">
.zz-uni-live-col_202009071500 {
    .uni-live-col {
        padding:28rpx 24rpx 32rpx;
        background: $theme-panel-bg-color;
        box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(228,228,228,1);
        border-radius: 6rpx;
        .info-wrap {
            margin-bottom:64rpx;
        }
        .info {
            flex:0 0 74%;
            max-width:74%;
            margin-bottom:16rpx;
        }
        .info-item {
            max-width:100%;
        }
        .template__icon-live2 {
            margin-right:8rpx;
        }
        .btn {
            min-width:168rpx;
            padding:14rpx;
            line-height:40rpx;
            font-size:28rpx;
            color:$theme-bg-text-color;
            text-align:center;
            border-radius:36rpx;

            &.btn-wait {
                background-color: $theme-color-base;
            }

            &.btn-over {
                background-color: $theme-color-ghost-base;
            }
        }
        /*  */
        .live-image-wrap {
            width:100%;
            height:522rpx;
            border-radius:6rpx;
            overflow:hidden;
        }
        .live-image {
            width:100%;
            height:100%;
        }
    }
}
</style>